<template>
	<!-- 预约停车-停车场列表 -->
	<view class="" @click.prevent.stop="setNearShow" style="height: 100vh">
	<!-- 	<view class="content-box">
			<view class="search-box">
				<view class="history-box">
					<view class="history-box-top">
						<text>历史记录</text>
						<image class="image_ss" src="../../static/parkingLot/ico_ss1@2x.png"></image>
					</view>
					<view class="history-box-list">
						<view v-for="(i, index) in 3" :key="i" class="box-item"
							:style="{ marginLeft: index === 0 && '40rpx' }">金源花园
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<view class="content">
			<view class="positioning">
				<view class="left">
					<text>东莞东城区</text>
					<u-icon name="arrow-down-fill" size="16"></u-icon>
				</view>
				<view class="right">
					<u-icon name="question-circle-fill" size="30"></u-icon>
					<text>28°C</text>
				</view>
			</view>
			<view class="search-car">
				<view class="search" ref="myElement">
					<u-input v-model="searchParam.parkingName" type="text" placeholder="搜索停车场"  />
					<u-icon name="search" size="36" class="search-icon" color="#999999"></u-icon>
				</view>
				<view class="distance" @click.stop="handleSelectNear" :style="{ background: showNear && '#E7F1FE' }">
					<text>{{ nearList[searchParam.sort].title }}</text>
					<u-icon name="arrow-down" size="16" class="arrow-right" color="#333333"></u-icon>
					<view class="arrow-down-content" v-if="showNear">
						<view class="arrow-down-content-item" v-for="(i, index) in nearList" :key="i" :style="{
							color: searchParam.sort == index && '#1677FE',
							background: searchParam.sort == index && '#E7F1FE',
							marginTop: index === 0 && '20rpx',
							marginBottom: index === 2 && '20rpx',
						}" @click.stop="handleSelectItem(i, index)">
							{{ i.title }}
						</view>
					</view>
				</view>
			</view>

			<view class="carList">
				<view class="list-item" v-for="(item, index) in dataList" :key="index">
					<view class="adress-info" @click="showDetail(item)">
						<view class="plot">
							<text>{{ item.parkingName }}</text>
							<text>{{ item.distanceText }}</text>
						</view>
						<view class="address">
							<u-icon name="map" size="24" color="#333333"></u-icon>
							<text>{{ item.address }}</text>
						</view>
						<view class="pay">
							<u-icon name="rmb-circle" size="24" color="#333333"></u-icon>
							<view class="pay-item">
								<view class=""> 收费: </view>
								<text> {{ item.cost }}元/小时</text>
								<view class="data"> 日上限30元 </view>
							</view>
						</view>
						<view class="space">
							<view class="space-item">
								<image src="../../static/parkingLot/ico_z.png" mode=""></image>
								<text>{{ item.totalSpace }}</text>
							</view>
							<view class="space-item">
								<image src="../../static/parkingLot/ico_y.png" mode=""></image>
								<text>{{ item.useSpace }}</text>
							</view>
						</view>
						<view class="navigation" @click.stop="parkingClick"> 导航 </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchParam: {
				openid: "",
				longitude: "",
				latitude: "",
				weighting: "1",
				parkingName: "",
				sort: '0',
				lastItemTime:''
			},
			dataList: [],
			nearList: [
				{
					title: "价格最低",
					value: "2",
				},
				{
					title: "离我最近",
					value: "0",
				},
				{
					title: "车位最多",
					value: "1",
				},
			],
			showNear: false,
			isShowSearchList: false,
		};
	},
	onLoad() { },
	onShow() {
		this.getList()
		this.SearchLogList()
	},
	onPullDownRefresh() {
		this.getList()
	},
	// 上拉加载调用
	onReachBottom() {
		this.getList()
	},
	watch:{

	},
	methods: {
		SearchLogList(){
			let openId = uni.getStorageSync("userInfo").openid;
			let payload = {
				openid: openId,
			
			};
			this.$Api.getSearchLogList(payload).then((res) => {
			});
		},
		getList(pages) {
			// 获取openId
			let openId = uni.getStorageSync("userInfo").openid;
			let payload = {
				...this.searchParam,
				openid: openId,
				// longitude: uni.getStorageSync('location').longitude,
				longitude: "116.19252",
				// latitude: uni.getStorageSync('location').latitude,
				latitude: "23.36919",
			
			};
			this.$Api.getParkingLotList(payload).then((res) => {
				wx.stopPullDownRefresh()
				this.dataList = res.data.dataList;
				this.searchParam.weighting=res.data.weighting
				this.searchParam.lastItemTime=res.data.lastItemTime
			});
		},
		parkingClick() { },
		showDetail(item) {
			uni.navigateTo({
				url: "./detail",
			});
		},
		handleSelectNear() {
			this.showNear = !this.showNear;
		},
		handleSelectItem(i, index) {
			this.searchParam.sort = index;
			this.showNear = false;
		},
		showSearchBox() { },
		setNearShow() {
			this.showNear = false;
		},
	},
};
</script>

<style lang="scss">
@import "index.scss";
</style>
